<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>鑫泽科智能印章管理平台</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link href="css/layui.css" rel="stylesheet">
  <style>
    .container{
      background: url("images/login_bg.jpg");
      background-size: 100% 100%;
      height: 100%;
      position: fixed;
      width: 100%;
    }
    .login-form {
      position: relative;
      width: 450px;
      max-width: 100%;
      padding: 180px 35px 0;
      margin: 0 auto;
      overflow: hidden;
  }
  .form-title{
    font-size: 32px;
    color: #ffffff;
    margin: 0px auto 0 auto;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC",
      "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
  }
  
  </style>
</head>
<body>
<div class="container">
  <div class="login-form">
    <div class="form-title">鑫泽科智能印章管理平台</div>
    <form class="layui-form " lay-filter="login">
      <div class="layui-row layui-col-space16">
        <div class="layui-col-md12">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="userName" value=""  required lay-verify="required" lay-reqText="用户名不能为空" placeholder="用户名" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
      </div>  
      <div class="layui-row layui-col-space16">
        <div class="layui-col-md12">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input type="password" name="password" value="" required lay-verify="required" lay-reqText="密码不能为空" required placeholder="密码" autocomplete="off" class="layui-input" lay-affix="eye">
          </div>
        </div>
        <div class="layui-col-md16">
          <button class="layui-btn" style="width: 100%;" id="btnLogin">登录</button>
        </div>
      </div>
    </form>
  </div>
  
</div>
<script src="js/layui.js"></script>
<script type="module">
  import login from './js/login.js'
  layui.use(['form','layer'], function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    sessionStorage.clear();
    
    $('#btnLogin').on('click', function(){
      layer.load(0, {
        time: 5*1000,
      });
      form.submit('login', function(data){
        login.login(layui.jquery,data.field,function(rspData){
          if(rspData.code != 1){
            layer.msg('用户名或密码错误', {icon: 5});
            return;
          }
          sessionStorage.setItem("userData",JSON.stringify(rspData.data));
        },function(xhr){
          layer.closeAll('loading');
          var accessToken = xhr.getResponseHeader("x-access-token");
          sessionStorage.setItem("token",accessToken);
          if(accessToken){
            layer.msg('登录成功');
            setTimeout(() => {
              window.location.replace('index.html')
            }, 500);
          }
        })
      });

      return false;
    });
  });
</script>
</body>
</html>
